<template>
	<view>
		<u-popup :show="PopupShow" mode="center" :round="10" @close="popupClose" @open="popupOpen">
			<view class="popup">
				<view class="title">
					{{title}}
				</view>
				
				<view class="content">
					<u--textarea v-model="sign" count maxlength="50" height="100"></u--textarea>
				</view>
				
				<view class="bottom flex-no-horizontal">
					<button class="cancel-btn flex-no-horizontal" @click="cancleClick">取消</button>
					<button class="confirm-btn flex-no-horizontal" @click="confirmClick"
					:style="{'background-color': confirmBgColor}">确认</button>
				</view>
				
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {communityAppealAddApi} from '../../../api/index.js'
	export default {
		props: {
			PopupShow: {
				type: Boolean,
				default () {
					return false;
				}
			},
			// 是否默认为举报弹窗
			isTypeComplaint: {
				type: Boolean,
				default () {
					return true
				}
			},
			title: {
				type: String,
				default () {
					return '请输入举报内容 '
				}
			},
			confirmBgColor: {
				type: String,
				default () {
					return 'rgba(55, 214, 123, 1)'
				}
			},
			articleId:{
				type:Number,
				default () {
					return 0;
				}
			}
		},
		data() {
			return {
				sign:'',
			};
		},
		methods: {
			
			//举报点击
			async confirmClick(){
				if (!this.sign) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				} 
				
				if (!this.isTypeComplaint) {
					this.$emit('confirm', this.sign)
					this.sign = ''
					return
				}
				
				try{
					const res = await communityAppealAddApi({
						articleId:this.articleId,
						message:this.sign
					})
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					this.sign = ''
					this.$emit('closeComplaint')
				}catch(e){
					//TODO handle the exception
					this.$emit('closeComplaint')
					uni.showToast({
						title:e.message || e.data,
						icon:'none'
					})
				}
			},
			// 取消
			cancleClick(){
				this.sign = ''
				this.$emit('closeComplaint')
			},
			
			popupClose(){
				
			},
			popupOpen(){
				
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup{
		width: 590rpx;
		
		.title{
			font-size: $uni-font-size-lg;
			color: $uni-color-black;
			text-align: center;
			margin: 49rpx 0;
		}
		
		.content{
			padding: 0 40rpx;
			margin-bottom: 40rpx;
		}
		
		.bottom{
			margin: 0 40rpx;
			padding-bottom: 45rpx;
			justify-content: space-between;
			.cancel-btn{
				width: 235rpx;
				height: 80rpx;
				justify-content: center;
				background-color: rgba(247, 247, 247, 1);
				font-size: $uni-font-size-base;
				color: rgba(178, 180, 181, 1);
				border-radius: 40rpx;
			}
			.confirm-btn{
				width: 235rpx;
				height: 80rpx;
				justify-content: center;
				background-color: rgba(55, 214, 123, 1);
				font-size: $uni-font-size-base;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
			
			button::after{
				border: 0;
			}
			
		}
		
	}
</style>
